<template>
  <div class='container'>
    <div id="app">
    <div>何鑫鑫</div>
     <p >{{bianjiid===''?'试题录入':'试题编辑'}}</p>
     <hr style="margin:15px 0px ">
     <el-form ref="form" :model='form' :rules="rules"  label-width="120px" class="demo-dynamic">
      <el-form-item
       prop="subjectID"
       label="学科">
        <el-select  @change='change' style="width:400px;" v-model="form.subjectID" placeholder="请选择">
        <el-option
        style="width:400px;"
          v-for="item in subjectoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="目录" prop="catalogID">
        <el-select style="width:400px;" v-model="form.catalogID" placeholder="请选择">
        <el-option
        style="width:400px;"
          v-for="item in towsubjectoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
        </el-select>
      </el-form-item>
       <el-form-item prop="enterpriseID" label="企业">
        <el-select style="width:400px;" v-model="form.enterpriseID" placeholder="请选择">
        <el-option
        style="width:400px;"
          v-for="item in qiyeliebiao"
          :key="item.id"
          :label="item.company"
          :value="item.id">
        </el-option>
        </el-select>
      </el-form-item>
        <el-form-item prop="province" label="城市" >
             <el-select style="width:198px; margin-right:4px" v-model="form.province" placeholder="请选择">
           <el-option
           style="width:198px;"
             v-for="item in provinces"
             :key="item"
             :label="item"
             :value="item">
           </el-option>
          </el-select>
          <el-select style="width:198px;" class="myel-input__inner" v-model="form.city" placeholder="请选择">
           <el-option
           style="width:198px;"
             v-for="item in gitchengshi"
             :key="item"
             :label="item"
             :value="item">
            </el-option>
            </el-select>
        </el-form-item>
       <el-form-item label="方向"
       prop="direction"
      >
        <el-select style="width:400px;"  v-model="form.direction" placeholder="请选择">
        <el-option
        style="width:400px;"
          v-for="item in fangxiang"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题型" >
        <el-radio-group @change="isquestionType" v-model="form.questionType">
          <el-radio label="1">单选</el-radio>
          <el-radio label="2">多选</el-radio>
          <el-radio label="3">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度">
        <el-radio-group v-model="form.difficulty">
          <el-radio label="1">简单</el-radio>
          <el-radio label="2">普通</el-radio>
          <el-radio label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题干"
      prop="question"
      >
       <quill-editor v-model="form.question"  :options="editorOptions"></quill-editor>
      </el-form-item>
      <el-form-item v-if="isxuan==='1'" label="选项">
        <div class="uploadbox" style="margin-top:10px" v-for="(item,index) in xuanxiang" :key="item.label">
        <el-radio @change='changa' style="margin:0px" v-model="radio3" :label="item.label">{{item.code+' ：'}}</el-radio>
        <el-input v-model="item.title" style="width:240px;"></el-input>
        <uploadimg :dfurl='xuanxiang[index].img' :index='index' @index='getindex'  @on-success="onSuccessxuanxiang"></uploadimg>
        </div>
        <el-button style="margin-top:10px" type="danger" disabled icon="el-icon-el-icon-plus" @click="addxuan">增加选项与答案</el-button>
      </el-form-item>
      <el-form-item v-if="isxuan==='2'" label="选项">
        <div class="uploadbox" style="margin-top:10px" v-for="(item,index) in xuanxiang" :key="item.label"><el-checkbox v-model="duoxuan" :label="item.label" @change='duoxuanchanga' >{{item.code+' ：'}}</el-checkbox> <el-input
        v-model="item.title"
        style="width:240px;"></el-input>
          <uploadimg :dfurl='xuanxiang[index].img' :index='index' @index='getindex'  @on-success="onSuccessxuanxiang"></uploadimg>
        </div>
        <el-button style="margin-top:10px" type="danger" icon="el-icon-el-icon-plus" @click="addxuan">增加选项与答案</el-button>
      </el-form-item>
      <el-form-item label="解析视频">
        <el-input v-model="form.videoURL" style="width:400px;"></el-input>
      </el-form-item>
       <el-form-item label="答案解析"
      prop="answer"
     >
       <quill-editor v-model="form.answer" :options="editorOptions"></quill-editor>
      </el-form-item>
         <el-form-item label="题目备注">
           <el-input
           v-model="form.remarks"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              >
            </el-input>
      </el-form-item>
      <el-form-item label="试题标签">
           <el-select style="width:400px;"  v-model="form.tags" placeholder="请选择">
        <el-option
        style="width:400px;"
          v-for="item in lablelist"
             :key="item.id"
             :label="item.tagName"
             :value="item.tagName">
        </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onserve">{{bianjiid===''?'确认提交':'确认修改'}}</el-button>
      </el-form-item>
  </el-form>
    </div>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { simple } from '@/api/hmmm/subjects'
import { simple as towsimple } from '@/api/hmmm/directorys'
import { list as labellist } from '@/api/hmmm/tags'
import { list as qiyelist } from '@/api/hmmm/companys'
import { add, detail, update } from '@/api/hmmm/questions'
import uploadimg from '../components/img.vue'
export default {
  data () {
    return {
      uploadindex: null,
      isxuan: '1',
      duoxuan: [],
      radio3: null,
      bianjiid: '',
      editorOptions: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        }
      },
      xuanxiang: [{
        label: 1,
        code: 'A',
        title: '',
        isRight: true
      }, {
        label: 2,
        code: 'B',
        title: '',
        isRight: false
      }, {
        label: 3,
        code: 'C',
        title: '',
        isRight: false
      }, {
        label: 4,
        code: 'D',
        title: '',
        isRight: false
      }],
      form: {
        city: '',
        province: '',
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        direction: '',
        questionType: '',
        difficulty: '',
        question: '',
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      fangxiang: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      subjectoptions: [],
      towsubjectoptions: [],
      lablelist: [],
      qiyeliebiao: [],
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'blur' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'blur' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择城市', trigger: 'blur' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'blur' }
        ],
        question: [
          { required: true, message: '请选择题干', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请选择解析', trigger: 'blur' }
        ]
      },
      sz: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f']
    }
  },

  components: {
    quillEditor, uploadimg
  },
  computed: {
    provinces,
    gitchengshi () {
      return citys(this.form.province)
    }
  },
  created () {
    if (this.$route.query.id) {
      this.bianjiid = this.$route.query.id
      this.isbianjia()
    }
  },
  mounted () {
    this.gitsimplelist1()
  },
  methods: {
    getindex (index) {
      this.uploadindex = index
    },
    onSuccessduoxue (filelist, url) {
      this.duoxuan[this.uploadindex].img = url
    },
    onSuccessxuanxiang (filelist, url, index) {
      this.xuanxiang[this.uploadindex].img = url
    },
    // 题型变化单选多选简答
    isquestionType (e) {
      this.isxuan = e
    },
    // 根据编辑id是否为空判断是否要渲染编辑页面
    async isbianjia () {
      if (this.bianjiid !== '') {
        const res = await detail({ id: this.bianjiid })
        this.form = res.data
        var num = 0
        this.xuanxiang = res.data.options.map((item) => {
          num++
          if (item.isRight) {
            this.radio3 = num
          }
          return { ...item, label: num }
        })
        var arr1 = []
        this.xuanxiang.forEach((item, index) => {
          if (item.code === this.sz[index]) {
            arr1.push(item)
          }
        })
        this.xuanxiang = arr1
        this.isxuan = res.data.questionType
        var arr = []
        this.xuanxiang.forEach((item, index) => {
          if (item.isRight === 1) {
            arr.push(index + 1)
          }
        })
        this.duoxuan = arr
      }
    },
    async onserve () {
      try {
        await this.$refs.form.validate()
        if (this.bianjiid !== '') {
          await update({
            ...this.form,
            options: this.xuanxiang
          })
          this.$message.success('修改成功')
          this.$router.go(-1)
        } else {
          await add({
            ...this.form,
            options: this.xuanxiang
          })
          this.$message.success('添加成功')
          this.$router.push('/questions/list')
        }
      } catch (err) {
        console.log(err)
      }
    },
    duoxuanchanga () {
      var arr = []
      this.xuanxiang.forEach((item) => {
        item.isRight = this.duoxuan.some(item1 => {
          return item1 === item.label
        })
        arr.push(item)
      })
      this.xuanxiang = arr
    },
    changa (e) {
      var arr = []
      this.xuanxiang.forEach((item) => {
        item.isRight = item.label === e
        arr.push(item)
      })
      this.xuanxiang = arr
    },
    change () {
      this.form.catalogID = []
      this.gittowlist()
    },
    async gitsimplelist1 () {
      const res = await simple()
      const res1 = await qiyelist()
      this.qiyeliebiao = res1.data.items
      this.subjectoptions = res.data
    },
    async gittowlist () {
      const res = await towsimple({ subjectID: this.form.subjectID })
      const res1 = await labellist({ subjectID: this.form.subjectID })
      this.towsubjectoptions = res.data
      this.lablelist = res1.data.items
    },
    addxuan () {
      this.xuanxiang.push({
        label: this.xuanxiang.length + 1,
        code: this.sz[this.xuanxiang.length],
        title: ''
      })
    }
  }

}
</script>

<style scoped lang='scss'>
#app{
  background-color: #fff;
  margin: 5px;
  padding: 20px;
  border-radius: 5px;
}
.uploadbox{
  display: flex;
}
  </style>
